<ion-content>
    <ion-card>
        <ion-card-header>
            <ion-card-title>个人用户中心</ion-card-title>
            <ion-card-subtitle>星空考试平台（学生端）</ion-card-subtitle>
        </ion-card-header>

        <ion-card-content>
            <div class="avatar">
                <ion-avatar>
                    <img alt="Silhouette of a person's head"
                        src="https://ionicframework.com/docs/img/demos/avatar.svg" />
                </ion-avatar>
                <ion-label>{{ info.username }} 同学</ion-label>
                <ion-label>{{ info.level | toLevel }}</ion-label>
            </div>
        </ion-card-content>
    </ion-card>

    <!-- 操作记录 -->
    <ion-card>
        <ion-card-header>
            <ion-card-subtitle>用户操作记录</ion-card-subtitle>
        </ion-card-header>
        <ion-card-content>
            <ion-list>
                <ion-item *ngFor="let item of userLog">
                    <ion-label>{{ item.createdAt | toTime }} - {{ item.remark }}</ion-label>
                </ion-item>
            </ion-list>
        </ion-card-content>
    </ion-card>

    <ion-button expand="block" (click)="open = true">修改信息</ion-button>

    <ion-button expand="block" color="danger" (click)="logout()">退出登录</ion-button>

    <!-- 修改信息 弹出框 -->
    <ion-modal [isOpen]="open">
        <ng-template>
            <ion-header>
                <ion-toolbar>
                    <ion-buttons slot="start">
                        <ion-button (click)="cancel()">取消</ion-button>
                    </ion-buttons>
                    <ion-title>修改个人信息</ion-title>
                    <ion-buttons slot="end">
                        <ion-button (click)="confirm()" [strong]="true">修改</ion-button>
                    </ion-buttons>
                </ion-toolbar>
            </ion-header>
            <ion-content class="ion-padding">
                <ion-item>
                    <app-comp-level-selector [(value)]="info.level"></app-comp-level-selector>
                </ion-item>
                <ion-item>
                    <ion-label position="stacked">请输入性别</ion-label>
                    <ion-input type="text" placeholder="你的性别" [(ngModel)]="info.sex"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label position="stacked">请输入年龄</ion-label>
                    <ion-input type="text" placeholder="你的年龄" [(ngModel)]="info.age"></ion-input>
                </ion-item>
                <!-- <ion-item>
                    <ion-label position="stacked">请输入密码</ion-label>
                    <ion-input type="text" placeholder="你的密码" type="password" [(ngModel)]="info.password"></ion-input>
                </ion-item> -->
            </ion-content>
        </ng-template>
    </ion-modal>
</ion-content>